import { getItemIcon } from '@/redux/application/application-api';
import { blobToBase64 } from '@/utils/img-handle';
import { Image } from '@douyinfe/semi-ui';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';

export function AppIcon({ fileName }: any) {
  const [iconSrc, setIconSrc] = useState<any>();

  const getAppIcon = async (name: string) => {
    getItemIcon(name).then((result: any) => {
      if (result.data) {
        blobToBase64(result.data, (dataUrl: any) => {
          setIconSrc(dataUrl);
        });
      }
    });
  };

  useEffect(() => {
    if (!fileName) return;
    getAppIcon(fileName);
  }, [fileName]);

  return <Image src={iconSrc} width={50} height={50} />;
}
